<seed-content class="seed-crowd-step1-page">
  <seed-toolbar-header>
    <seed-toolbar-title>发起众筹1</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <div class="seed-crowd-step1">
    <div class="seed-crowd-info">
      <form [formGroup]="step1Form">
        <ul>
          <li class="crowd-activity-type seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*活动类型</div>
              <div class="crowd-form-step1-input">
                <select
                  formControlName="activeType"
                  (ngModelChange)="selectActiveType($event)"
                  [class.value-color]="step1Form.controls['activeType'].value"
                >
                  <option value="" disabled selected >请选择活动类型</option>
                  <option *ngFor="let item of activeType"
                          [value]="item.fieldValue"
                  >{{item.fieldName}}</option>
                </select>
                <i></i>
              </div>
            </div>
            <p class="validator-style fn_right"
               [class.show-input]="step1Form.controls['activeType'].valid || step1Form.controls['activeType'].pristine"
            >请选择活动类型</p>
          </li>
          <li class="crowd-activity-name seed-underline">
            <div class="crowd-form-info seed-flexbox seed-flexbox-align-center ">
              <div class="crowd-form-clum-name">*活动名称</div>
              <div class="crowd-form-step1-input">
                <input type="text"
                       class="activeName"
                       formControlName="activeName"
                       placeholder="请输入活动名称"
                       [class.value-color]="step1Form.controls['activeName'].value"
                >
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['activeName'].valid || step1Form.controls['activeName'].pristine"
            >请输入1-30字符</p>
          </li>
          <li class="crowd-activity-time seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*活动开始时间</div>
              <div class="active-time crowd-form-step1-input">
                <div class="active-time-case seed-flexbox seed-flexbox-align-center">
                  <p>
                    <span
                      [class.value-color]="step1Form.controls['activeStartTime'].value"
                    >{{params.activeStartTime?(params.activeStartTime | amDateFormat:'YYYY/MM/DD HH:mm'):'请选择开始时间'}}
                    </span>
                    <input type="datetime-local"
                           formControlName="activeStartTime"
                           (change)="startTimeCheck()"
                    >
                  </p>
                </div>
               <i></i>
              </div>
            </div>
            <p class="validator-style"
                *ngIf="startNow"
            >所选时间必须在当前时间点之后</p>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['activeStartTime'].valid || step1Form.controls['activeStartTime'].pristine"
            >请选择活动开始时间</p>
          </li>
          <li class="crowd-activity-time seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*活动结束时间</div>
              <div class="active-time crowd-form-step1-input">
                <div class="active-time-case seed-flexbox seed-flexbox-align-center">
                  <p>
                    <span
                      [class.value-color]="step1Form.controls['activeEndTime'].value"
                    >{{params.activeEndTime?(params.activeEndTime | amDateFormat:'YYYY/MM/DD HH:mm'):'请选择结束时间'}}
                    </span>
                    <input type="datetime-local"
                           #end
                           formControlName="activeEndTime"
                           (change)="endTimeChecks()"
                    >
                  </p>
                </div>
                <i></i>
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['activeEndTime'].valid || step1Form.controls['activeEndTime'].pristine"
            >请选择活动结束时间</p>
            <p class="validator-style"
               *ngIf="endTimeCheck"
            >结束时间必须大于开始时间</p>
          </li>
          <li class="crowd-sport-type seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*运动类型</div>
              <div class="crowd-form-step1-input">
                <select formControlName="sportType"
                        (ngModelChange)="selectSportType($event)"
                        [class.value-color]="step1Form.controls['sportType'].value"
                >
                  <option value="" disabled selected style="display:none;">请选择运动类型</option>
                  <option *ngFor="let item of sportType"
                          [value]="item.fieldValue"
                  >{{item.fieldName}}</option>
                </select>
                <i></i>
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['sportType'].valid || step1Form.controls['sportType'].pristine"
            >请选择运动类型</p>
          </li>
          <li class="crowd-activity-location seed-underline"
              (click)="showPicker=!showPicker"
          >
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*地点</div>
              <div class="chose-area crowd-form-step1-input">
                <input type="text"
                       onfocus="this.blur()"
                       formControlName="areaList"
                       placeholder="请选择活动地点"
                       [class.value-color]="step1Form.controls['areaList'].value"
                >
               <i></i>
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['areaList'].valid || step1Form.controls['areaList'].pristine"
            >请选择活动地点</p>
          </li>
          <li class="crowd-activity-contact seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*联系方式</div>
              <div class="crowd-form-step1-input">
                <input type="tel"
                       formControlName="contactWay"
                       class="contactWay"
                       placeholder="您的手机号只对加入者公开"
                       (blur)="contactCheck()"
                       [class.value-color]="step1Form.controls['contactWay'].value"
                >
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="phoneCheck"
            >请输入11位手机号</p>
          </li>
          <li class="crowd-activity-details-scription seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">*活动说明</div>
              <div class="crowd-form-step1-input">
              <textarea
                formControlName="activeDesc"
                placeholder="请介绍活动（如赛事或者培训）的详细情况"
                [class.value-color]="step1Form.controls['activeDesc'].value"
              ></textarea>
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['activeDesc'].valid || step1Form.controls['activeDesc'].pristine"
            >请输入1-1000字符</p>
          </li>
          <li class="crowd-activity-remarks seed-underline">
            <div class="crowd-form-info seed-flexbox">
              <div class="crowd-form-clum-name">备注(选填)</div>
              <div class="crowd-form-step1-input">
                <textarea formControlName="remarks"
                          placeholder="请填写备注"
                          [class.value-color]="step1Form.controls['remarks'].value"
                >请输入补充说明</textarea>
              </div>
            </div>
            <p class="validator-style"
               [class.show-input]="step1Form.controls['remarks'].valid || step1Form.controls['remarks'].pristine"
            >请输入1-100字符</p>
          </li>
        </ul>
      </form>
    </div>
    <div class="seed-crowd-image">
      <p class="crowd-image-title">配图(选填)</p>
      <ul class="crowd-image-picture seed-flexbox seed-flexbox-wrap">
        <li *ngFor="let item of fileImage, let i=index" >
          <img [src]="item" id="showImage">
          <i (click)="deletePicture(i)"></i>
        </li>
        <li *ngIf="fileImage?.length!=6">
          <input type="file"
                 class="uploading"
                 [name]="file"
                 multiple
                 accept="image/*"
                 (change)="selectPicture($event)"
          >
        </li>
      </ul>
    </div>
  </div>
</seed-content>
<div class="seed-crowd-button">
  <button (click)="saveOne()"
          [disabled]="!step1Form.valid || (params.activeStartTime >= params.activeEndTime) "
  >下一步</button>
</div>
<div class="regio-picker"
     [class.showPicker]="showPicker">
  <seed-regio-picker
    (complete)="handleRegioPicker($event)"
  ></seed-regio-picker>
</div>
